const AddData = {
    main(){
        this.submitData();
        this.onblurFn();
    },

    // 获取控件
    getElement(){
        // 获取控件
        const userId = document.querySelector('.model-id input');
        const userName = document.querySelector('.model-name input');
        const userSex = document.getElementsByName('sex');
        const userAge = document.querySelector('.model-age input');
        const userBirth = document.querySelector('.model-birth input');
        const J_date = document.getElementById('J_date').children;
        const userPhone = document.querySelector('.model-phone input');
        const userNode = document.getElementsByClassName('model-address')[0];
        const userAddress = userNode.children;
        const userDescript = document.querySelector('.model-descript textarea');
        const J_title = document.getElementById('J_title');

        // 年月日
        const J_year = document.getElementById('J_year');
        const J_month = document.getElementById('J_month');
        const J_day = document.getElementById('J_day');

        // 省市县
        const J_province = document.getElementById('J_province');
        const J_town = document.getElementById('J_town');
        const J_disrict = document.getElementById('J_disrict');

        return{
            userId,
            userName,
            userSex,
            userAge,
            userBirth,
            userPhone,
            userNode,
            userAddress,
            userDescript,
            J_date,
            J_title
        }
    },

    // 添加数据
    submitData(key) {
        // 获取操作按钮
        const J_add = document.getElementById('J_add');
        const J_model = document.getElementById('J_model');
        const J_cancel = document.getElementById('J_cancel');
        const modelBtn = document.querySelectorAll('.model-btn a');

        const obj = AddData.getElement();

        // 显示
        J_add.onclick = function(){
            obj.J_title.innerHTML = '添加员工信息';
            obj.userId.value = +(Data[Data.length - 1].userId) + 1;
            J_model.style.display = 'block';
        }

        // 隐藏
        J_cancel.onclick = () => {
            J_model.style.display = 'none';
            this.restFn(obj);
        }

        // 重置
        modelBtn[0].onclick = () => {
            this.restFn(obj);
        }

        // 提交数据
        modelBtn[1].onclick = () => {
            let bool = false;
            const elem = this.getFromData();
            obj.J_title.innerHTML == '修改员工信息' && (bool = true);

            if(this.htmlRegExp(elem)){
                if(!bool){
                    Data.push(elem);
                    if(confirm('添加成功,是否继续添加')){
                        this.restFn(obj);
                        obj.userId.value = +(Data[Data.length - 1].userId) + 1;
                    }else{
                        J_model.style.display = 'none';
                        this.restFn(obj);
                    }
                    index = 0;
                    Renderer.rendererFn(index, true);
                }else{
                    Data.splice(key,1,elem);
                    J_model.style.display = 'none';
                    this.restFn(obj);
                    Renderer.rendererFn(index, false);
                }
            }else{
                if(bool){
                    alert('修改数据失败，您的表单数据没有填写清楚！');
                }else{
                    alert('添加数据失败，您的表单数据没有填写清楚！');
                }
            }
        }
    },

    // 获取表单数据
    getFromData(){
        const obj = AddData.getElement();

        // 性别
        let userSexadd = '';
        for(let i = 0; i < obj.userSex.length; i++){
            if(obj.userSex[i].checked){
                userSexadd = obj.userSex[i].value;
            }
        }

        // 生日
        const userBirthadd = this.getOption(obj.J_date);

        // 籍贯
        const userAddressadd = this.getOption(obj.userAddress) || '';
        
        const object = {
            userId: obj.userId.value,
            userName: obj.userName.value,
            userSex: userSexadd,
            userAge: obj.userAge.value,
            userBirth: userBirthadd,
            userPhone: obj.userPhone.value,
            userAddress: userAddressadd,
            userDescript: obj.userDescript.value,
        };

        return object;
    },

    // 判断验证
    htmlRegExp(obj){
        const elem = AddData.getElement();
        if(!obj.userName || !obj.userAge|| !obj.userPhone || !obj.userBirth){
            return false;
        }
        if(elem.userName.nextElementSibling.innerHTML || elem.userPhone.nextElementSibling.innerHTML){
            return false;
        }
        return true;
    },

    // 失去焦点事件
    onblurFn(){
        const obj = AddData.getElement();

        // 姓名验证
        obj.userName.onblur = function(){
            if(!/^[\u4e00-\u9fa5]{2,4}$/.test(obj.userName.value)){
                obj.userName.nextElementSibling.innerHTML = '2~4个汉字！';
            }else{
                obj.userName.nextElementSibling.innerHTML = '';
            }
        }

        // 手机号验证
        obj.userPhone.onblur = function(){
            if(!/^1[34578]\d{9}$/.test(obj.userPhone.value)){
                obj.userPhone.nextElementSibling.innerHTML = '请输入正确的手机号！';
            }else{
                obj.userPhone.nextElementSibling.innerHTML = '';
            }
        }
    },

    // 获取下拉框选中的值
    getOption(elem){
        let str;
        for(let i = 0; i < elem.length; i++){
            let index = elem[i].selectedIndex;
            if(index !== 0){
                if(i === 0){
                    str = elem[i]["options"][index].text;
                }else{
                    str += ('/' + elem[i]["options"][index].text);
                }
            }
        }
        return str;
    },

    // 清空
    restFn(obj){
        obj.userName.value = '';
        obj.userSex[0].checked = true;
        obj.userAge.value = '';
        obj.userPhone.value = '';
        obj.userDescript.value = '';
        Renderer.cityFun(data, []);
        Renderer.birth([0, 0, 0]);

        obj.userPhone.nextElementSibling.innerHTML = '';
        obj.userName.nextElementSibling.innerHTML = '';
    }
}